<template>
	<view style="margin: 50rpx;">
		<view style="display: flex; justify-content: flex-end; align-items: flex-end;">
			<image src="../../static/tabBar/my-active.png" style="width: 40rpx; height: 40rpx;" @click="myfiles"></image>
		</view>

		<view style="color: #0070D9;font-size: 40rpx;font-weight: bold;">
			
			<view style=" border-bottom: 5rpx solid #0070D9;width: 160rpx;">新增客户</view>
			</view>
		<view style="margin: 30rpx;">
			<text style="margin-top: 10rpx; color: gray;">姓名:</text>
			<view style="height: 10rpx;"></view>
			<u--input class="u-inp" placeholder="请输入客户姓名" border="surround" v-model="info.name"></u--input>
		</view>

		<!-- 性别 -->
		<u-picker :show="show1" :columns="columns1" keyName="label" @confirm="confirm1"
			@cancel="show1=false"></u-picker>
		<text style="margin-top: 10rpx;margin-left: 30rpx; color: gray;">性别:</text>
		<view style="height: 10rpx;"></view>
		<view style=" margin: 30rpx;">
			<view class="iptop" @click="show1=true"><text style="margin-left: 10rpx;">{{sexName}}</text></view>
		</view>
		<view style=" margin: 30rpx;">
			<text style="margin-top: 10rpx; color: gray;">年龄：</text>
			<view style="height: 10rpx;"></view>
			<u--input placeholder="请输入年龄" border="surround" v-model="info.age"></u--input>
		</view>
		<view style=" margin: 30rpx;">
			<text style="margin-top: 10rpx; color: gray;">邮箱：</text>
			<view style="height: 10rpx;"></view>
			<u--input placeholder="请输入邮箱" border="surround" v-model="info.mail"></u--input>
		</view>
		<view style=" margin: 30rpx;">
			<text style="margin-top: 10rpx; color: gray;">手机号：</text>
			<view style="height: 10rpx;"></view>
			<u--input placeholder="请输入手机号" border="surround" v-model="info.phone"></u--input>
		</view>

		<!-- 客户状态 -->
		<u-picker :show="show2" :columns="columns2" keyName="label" @confirm="confirm2"
			@cancel="show2=false"></u-picker>
		<view style=" margin: 30rpx;">
			<text style="margin-top: 10rpx; color: gray;">客户类型：</text>
			<view style="height: 10rpx;"></view>
			<view class="iptop" @click="show2=true"><text style="margin-left: 10rpx;">{{khName1}}</text></view>
		</view>
		<view style=" margin: 30rpx;">
			<text style="margin-top: 10rpx; color: gray;">公司名称：</text>
			<view style="height: 10rpx;"></view>
			<u--input placeholder="请输入公司名称" border="surround" v-model="info.company"></u--input>
		</view>
		<view style=" margin: 30rpx;">
			<text style="margin-top: 10rpx; color: gray;">下次约谈时间：</text>
			<view style="height: 10rpx;"></view>
			<view class="example-body">
				<uni-datetime-picker type="datetime" v-model="info.remindTime" @change="changeLog" />
			</view>
		</view>



		<view style=" margin: 30rpx;">
			<text style="margin-top: 10rpx; color: gray;">地址：</text>
			<view style="height: 10rpx;"></view>
			<u--input placeholder="请输入地址" border="surround" v-model="info.address"></u--input>
		</view>

		<view style=" margin: 30rpx;">
			<text style="margin-top: 10rpx; color: gray;">交流内容：</text>
			<view style="height: 10rpx;"></view>
			<view style="border-radius: 10rpx;border: 1rpx solid gray;">
				<textarea rows="8" cols="80" style="margin:10rpx; width: 95%;"></textarea>
			</view>
		</view>
		<view style="height: 50rpx;"></view>

		<view
			style="border-radius: 10rpx; background-color: #0070D9; text-align: center;height: 70rpx;line-height: 70rpx;color: white;font-weight: bold;" @click="addInfo()">
			新增客户
		</view>
		<view style="height: 50rpx;"></view>
	</view>

</template>

<script>
	import api from "../../request/api.js"
	export default {
		data() {
			return {
				//客户信息
				info: {
					name: "", //姓名
					sex: "", //性别
					age: "", //年龄
					mail: "", //邮箱
					phone: "", //手机号
					type: "", //客户类型
					company: "", //公司名称
					address: "", //地址
					remindTime: "", //时间
					content: "", //交流内容	
				},
				sexName: "---请选择性别---",
				show1: false, //性别
				khName1: "---请选择客户类型---",
				columns1: [
					[{
						label: "男",
						value: 0
					}, {
						label: "女",
						value: 1
					}]
				],
				show2: false, //客户状态
				columns2: [
					[{
						label: "成交客户",
						value: 0
					}, {
						label: "意向客户",
						value: 1
					}, {
						label: "潜在客户",
						value: 2
					}, {
						label: "失信客户",
						value: 3
					}]
				],
			};
		},
		onLoad(params) {
			// console.log("params===>",params)
			const path = JSON.parse(params.path)
			console.log("path===>",path)
		},
		methods: {
			//性别点击确定
			confirm1(e) {
				console.log(e.value[0])
				this.info.sex = e.value[0].value
				this.sexName = e.value[0].label
				this.show1 = false
			},
			//客户类性确定
			confirm2(e) {
				console.log(e.value[0])
				this.info.type = e.value[0].value
				this.khName1 = e.value[0].label
				this.show2 = false
			},
			//添加客户
			addInfo(){
				api.insertClients(this.info).then(data=>{
					console.log(data)
				})
			},
			myfiles(){
				uni.navigateTo({
					url:"/pages/files/myFiles"
				})
			},
		},
	}
</script>

<style lang="less">
	.u-inp {
		padding: 30rpx;
	}

	.iptop {
		background-color: white;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		height: 50rpx;
		line-height: 50rpx;
		width: 100%;
		border-radius: 10rpx;
		border: 1rpx solid #E0E0E3;
	}
</style>